
import { Box, ListSubheader, ListItemButton, Container, Theme, ListItemText, ListItemIcon, ListItem, IconButton, Divider, List } from "@mui/material";
import React, { useRef, useMemo, ReactNode } from "react";
import { Routes, Route, useNavigate, Navigate, useParams, useLocation } from "react-router-dom";

export type MenuItem = {title:string; router:string}


function MenuList({menulist}:{menulist:MenuItem[]}){
    return  <Box
      sx={{
        borderRight: "1px solid rgba(0, 0, 0, 0.12)",
        width: 100,
        height: "100%",
        background: "#fff",
        boxSizing: "border-box",
        flexShrink: 0,
        padding: "20px 0"
      }}
    >

      {/* {menulist.length > 0 &&
        menulist.map((m, i) => (
          <React.Fragment key={i}>
            {i !== 0 && <Divider />}
            <List  subheader={<ListSubheader>{m.title}</ListSubheader>}>
              { (
                  <ListItem  disablePadding onClick={() => navigate(`/${m.router}`, { replace: true })}>
                    <ListItemButton }>
                      <ListItemIcon className={classes.icon}>{item.icon}</ListItemIcon>
                      <ListItemText classes={{ primary: classes.text }} primary={t(item.title)} />
                    </ListItemButton>
                  </ListItem>
                )}
            </List>
          </React.Fragment>
        ))} */}
    </Box>
}

